<!--
 * @Author: H.
 * @Date: 2021-11-01 19:14:36
 * @LastEditTime: 2021-11-02 19:23:27
 * @Description: Pager
-->

<template>
  <div
    class="zeus-pager"
    :class="{ hide: hideIfOnePage === true && totalPage <= 1 }"
  >
    <span
      class="zeus-pager-nav prev"
      :class="{ disable: currentPage === 1 }"
      @click="onClickPage(currentPage !== '...' && currentPage - 1)"
    >
      <Icon name="left" />
    </span>
    <span
      v-for="(page, index) in pages"
      :key="index"
      class="zeus-pager-item"
      @click="onClickPage(page)"
      :class="{ active: page === currentPage, separator: page === '...' }"
    >
      {{ page }}
    </span>
    <span
      class="zeus-pager-nav next"
      :class="{ disable: currentPage === totalPage }"
      @click="onClickPage(currentPage !== '...' && currentPage + 1)"
    >
      <Icon name="right" />
    </span>
  </div>
</template>

<script lang="ts">
import { computed, ref } from 'vue'
export default {
  props: {
    totalPage: {
      type: Number,
      required: true,
    },
    currentPage: {
      type: Number,
      required: true,
    },
    hideIfOnePage: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    // 数组去重
    const unique = (array) => {
      let object = {}
      array.forEach((n) => {
        object[n] = true
      })
      return ref(Object.keys(object).map((s) => parseInt(s, 10)))
    }

    const pages = computed(() => {
      return unique(
        [
          1,
          props.currentPage,
          props.currentPage - 1,
          props.currentPage - 2,
          props.currentPage + 1,
          props.currentPage + 2,
          props.totalPage,
        ]
          .filter((n) => n >= 1 && n <= props.totalPage)
          .sort((a, b) => a - b) // 数组排序
      ).value.reduce((prev, current, index, array) => {
        prev.push(current)
        array[index + 1] !== undefined &&
          array[index + 1] - current > 1 &&
          prev.push('...')
        return prev
      }, [])
    })

    const onClickPage = (n) => {
      if (n !== '...' && n >= 1 && n <= props.totalPage) {
        context.emit('update:currentPage', n)
      }
    }
    return { pages, onClickPage }
  },
}
</script>

<style lang="scss">
@import '../styles/_var';
.zeus-pager {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
  &.hide {
    display: none;
  }
  &-item {
    border: 1px solid #e1e1e1;
    border-radius: $border-radius;
    padding: 0 4px;
    min-width: 28px;
    height: 28px;
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $blue;
    }

    &.active {
      cursor: default;
    }

    &.separator {
      border: none;
      cursor: default;
    }
  }

  &-nav {
    display: inline-flex;
    background: $grey;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    border-radius: $border-radius;
    margin: 0 4px;
    cursor: pointer;
    &.disable {
      cursor: no-drop;
      svg {
        fill: darken($grey, 30%);
      }
    }
  }
}
</style>
